<template>
	<view class="login-view">
		<view class="login-header-view">
			<view class="login-form-view">
				<view class="login-form-item">
					<view class="login-form-label">手机号</view>
					<input v-model="form.account" class="login-form-input" placeholder="请输入手机号"
						placeholder-class="login-form-place" maxlength="11">
				</view>
				<view class="login-form-item">
					<view class="login-form-label">密码</view>
					<input v-model="form.password" type="password" class="login-form-input" placeholder="请输入密码"
						placeholder-class="login-form-place">
				</view>
				<view class="login-form-item">
					<view class="login-form-label">验证码</view>
					<input v-model="form.code" type="text" class="login-form-input" placeholder="请输入验证码"
						placeholder-class="login-form-place">
					<image class="login-form-image" :src="codeImage" mode="" @click="getCode"></image>
				</view>
				<view class="login-form-radio1">
					<view class="login-form-radio">
						<u-checkbox-group>
							<u-checkbox v-model="checked" active-color="#F37F02" shape="circle"
								@change="checkboxChange">
								<text style="color: #ffffff;">记住密码</text>
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="login-app" @click="navigatorAPP">下载APP</view>
				</view>
			</view>
			
			<view class="with-bottom-view">
				<view class="with-bottom-view1" @click="submitLogin">
					登录
				</view>
				<view class="with-bottom-view1" style="margin-top: 80rpx;" @click="register">
					注册用户
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				form: {
					account: '',
					password: '',
					scene: 1,
					code: '',
					uid: ''
				},
				codeImage: '',
				checked: true,
			}
		},
		onShow() {
			if (this.checked) {
				let form = uni.getStorageSync('form')
				if (form) {
					form = JSON.parse(form)
					this.form.account = form.account
					this.form.password = form.password
					this.form.code = ''
				} else {
					this.form = {
						account: '',
						password: '',
						scene: 1,
						code: '',
						uid: ''
					}
				}
			} else {
				let form = uni.getStorageSync('form')
				if (form) {
					uni.removeStorageSync('form')
					this.form = {
						account: '',
						password: '',
						scene: 1,
						code: '',
						uid: ''
					}
				} else {
					this.form = {
						account: '',
						password: '',
						scene: 1,
						code: '',
						uid: ''
					}
				}
			}
			this.getCode()
		},
		methods: {
			...mapMutations(['navLogin']),
			navigatorAPP() {
				/*#ifdef APP-PLUS*/
				plus.runtime.openURL('https://dream.yanshi888.com/down/')
				/*#endif*/

				/*#ifdef H5*/
				window.open('https://dream.yanshi888.com/down/')
				/*#endif*/
			},
			register() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			// 获取验证码
			getCode() {
				this.$http.post(this.$api.captcha, {}, {
					token: true
				}).then(res => {
					this.form.uid = res.data.uid
					this.codeImage = 'data:image/png;base64,' + res.data.base64
				})
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				this.checked = e.value
			},
			submitLogin() {
				if (!this.form.account) return uni.showToast({
					title: '请输入手机号',
					icon: "none"
				})
				if (!this.form.password) return uni.showToast({
					title: '请输入密码',
					icon: "none"
				})
				if (!this.form.code) return uni.showToast({
					title: '请输入验证码',
					icon: "none"
				})
				// 如果选中 存本地
				if (this.checked) {
					uni.setStorageSync('form', JSON.stringify(this.form))
				} else {
					let form = uni.getStorageSync('form')
					if (form) {
						uni.removeStorageSync('form')
					}
				}
				this.goToLogin()
			},
			// 登录
			goToLogin() {
				let loginStatus = uni.getStorageSync('loginStatus')
				if (loginStatus) {
					uni.removeStorageSync('loginStatus')
				}
				this.$http.post(this.$api.account, this.form).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "登录成功",
							icon: 'none'
						})
						this.navLogin(res.data)
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-form-radio1 {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.login-app {
			font-size: 13px;
			color: #ffffff;
		}
	}

	.login-logo-view1 {
		display: flex;
		align-items: center;
		justify-content: center;

		.login-logo-view {
			margin-top: 200rpx;
			width: 200rpx;
			height: 200rpx;
			border-radius: 200rpx;
			background-color: #ffffff;
			padding: 10rpx;
		}

		.login-logo-image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.login-form-radio {
		display: flex;
		align-items: center;
	}

	.login-form-label {
		padding: 0 20rpx;
		min-width: 100rpx;
		flex-shrink: 0;
	}

	.login-form-image {
		width: 240rpx;
		height: 80rpx;
	}

	.login-form-invite_code {
		display: flex;

		.login-invite_code-title {
			font-size: 16px;
			font-weight: bold;
			letter-spacing: 4rpx;
			// color: #2A74EB
			margin: 20rpx 0rpx 0rpx 50rpx;
		}
	}

	.with-bottom-view {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-top: 60rpx;

		.with-bottom-view1 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 20rpx 0;
			background: #FFF0CA;
			border-radius: 20rpx;
			font-size: 15px;
			color: 333333;
		}
	}

	.forgotPassword {
		font-size: 13px;
		color: #ffffff;
		text-align: right;
		margin-top: 30rpx;
	}

	.login-form-view {
		margin-top: 240rpx;

		.login-form-item {
			background-color: #FFF0CA;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			.login-form-input {
				flex: 1;
				padding: 0 20rpx;
			}

			.login-form-place {
				font-size: 15px;
				color: #999999;
			}

			.login-form-code {
				font-size: 13px;
				color: #ffffff;
				flex-shrink: 0;
				padding-left: 20rpx;
			}
		}

	}

	.login-view {
		// background: linear-gradient(180deg, #A3CCE9 0%, rgba(51, 120, 231, 0.00) 50%);
		// background-blend-mode: multiply;
		background: url('@/static/app/login.png')no-repeat;
		background-size: 100% 100%;
		// background: linear-gradient(180deg, #FFDCB7 0%, rgba(255, 255, 255, 0) 100%);
		height: 100vh;
		position: relative;
	}

	.login-header-view {
		padding: 30rpx;
		position: absolute;
		bottom: 50rpx;
		left: 30rpx;
		width: 92%;
		.login-header-title {
			font-size: 25px;
			font-weight: bold;
			// margin-top: 200rpx;
			color: #333333;
		}

		.login-check-view1 {
			display: flex;
			align-items: center;

			.login-check-view {
				display: flex;
				align-items: center;
				position: relative;

				margin: 60rpx 60rpx 0px 30px;

				.login-check-title {
					font-size: 15px;
					color: #333333;
				}

				.check-icon {
					position: absolute;
					bottom: -10rpx;
					left: 15rpx;
					width: 30rpx;
					height: 8rpx;
					background-color: #ffffff;
				}
			}
		}
	}
</style>